<template>
    <PageView>
        <a-spin :spinning="loading">
            <a-card :title="`${id?'编辑':'添加'}新闻`">
                <a-row :gutter="10" class="inputGroup" style="margin-bottom: 20px" type="flex" justify="space-around" align="middle">
                    <a-col :xs="24" :md="16" :lg="16" :xl="10">
                        <div class="imgContaienr">
                            <div class="con">
                                <img v-if="pic!==``" :src="pic"/>
                                <a v-else class="placeText">请选择图片</a>
                            </div>
                        </div>
                    </a-col>
                    <a-col :xs="24" :md="8" :lg="8" :xl="14">
                        <div class="btnCon">
                            <input @change="handleChange($event,1)" type="file" accept="image/*"/>
                            <a-button-group>
                                <a-button type="primary">选择图片</a-button>
                            </a-button-group>
                        </div>
                    </a-col>
                </a-row>
                <a-form :form="form" style="width: 600px">
                    <a-form-item label="标题" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-input v-decorator="[`title`, { rules: [{ required: true, message: '请输入标题' }]}]" placeholder="请输入标题"/>
                    </a-form-item>
                </a-form>
                <p>内容:</p>
                <div class="editCon">
                    <editor id="tinymce" v-model="content" :init="init"></editor>
                    <div class="btnCon editCon">
                        <input @change="handleChange($event,2)" type="file" accept="image/*"/>
                        <a-button-group>
                            <a-button type="primary">选择图片</a-button>
                        </a-button-group>
                    </div>
                </div>
                <a-button type="primary" @click="sub">
                    提交
                </a-button>
            </a-card>
        </a-spin>
    </PageView>
</template>

<script>
    import Member from '../../api/Member'
    import Art from '../../api/Art'
    import tinymce from 'tinymce/tinymce'
    import editor from '@tinymce/tinymce-vue'
    import 'tinymce/themes/silver'
    import 'tinymce/plugins/image'// 插入上传图片插件
    import 'tinymce/plugins/media'// 插入视频插件
    export default {
        name: 'newEdit',
        components:{
            editor
        },
        data(){
            return{
                form: this.$form.createForm(this),
                loading:this.$route.query.id?true:false,
                labelCol:{
                    xs:{span:24},
                    sm:{span:4},
                },
                wrapperCol:{
                    xs:{span:24},
                    sm:{span:20},
                },
                pic:"",
                id:this.$route.query.id||undefined,
                init: {
                    language_url: `${projectUrl}/tinymce/langs/zh_CN.js`,//语言包的路径
                    language: 'zh_CN',//语言
                    skin_url: `${projectUrl}/tinymce/skins/ui/oxide`,//skin路径
                    height: 500,//编辑器高度
                    branding: false,//是否禁用“Powered by TinyMCE”
                    menubar: false,//顶部菜单栏显示
                    plugins: 'image media',
                    toolbar: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
                },
                content:""
            }
        },
        mounted(){
            if(this.id)this.getOne()
        },
        methods:{
            getOne(){
                Art.newsList({id:this.id}).then(res => {
                    this.loading = false
                    this.$nextTick(()=>{
                        this.pic = res.data.image
                        this.content = res.data.content
                        this.form.setFieldsValue({"title":res.data.title})
                    })
                })
            },
            handleChange(e,type){
                let file = e.target.files[0];
                let reader = new FileReader();
                reader.onload = () => {
                    Member.uploadPic({image:reader.result}).then(res=>{
                        if(type===1){
                            this.pic = res.url1
                        }else{
                            this.content+=`<img src=${res.url1} />`
                        }
                    })
                    reader.onload = null;
                };
                reader.readAsDataURL(file);
            },
            sub(){
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.loading = true
                        Art[this.id?`saveNews`:`addNews`]({...values,id:this.id,image:this.pic,content:this.content}).then(res => {
                            this.loading = false
                            this.$router.back()
                        }).catch(res=>{
                            this.loading = false
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .imgContaienr{
        border-radius: 8px;
        border:1px solid rgba(0,0,0,0.1);
        padding: 15px;
        .con{
            height: 300px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                display: block;
                max-height: 100%;
                max-width: 100%;
            }
            .placeText{
                font-size: 20px;
            }
        }
    }
    .btnCon{
        position: relative;
        overflow: hidden;
        display: inline-block;
        input{
            display: block;
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: red;
            opacity: 0;
        }
    }
    .editCon{
        margin-bottom: 20px;
        position: relative;
        .editCon{
            position: absolute;
            z-index: 1;
            top: 3px;
            right: 5px;
        }
    }
</style>